*{
    margin:0;
    padding: 0;
    box-sizing:border-box;
  }
  html{
      scroll-behavior: smooth;
  }

  .top-head{
    position: relative;
    width: 100%;
    height: 55px;
    background: #000000;
    z-index: 1000;
}
.top-head a:nth-child(1){
    text-decoration: none;
    color: white;
    font-size: 1rem;
    margin-left: 100px;
    margin-top: 10px;
    position: relative;
    z-index: 100;
    font-family: 'Raleway', sans-serif;
}
.top-head img{
    width: 20px;
    height: 20px;
    margin-top: 10px;
}
.top-head .main-a{
    text-decoration: none;
    color: rgb(255, 255, 255);
    font-size: 1rem;
    font-family: 'Raleway', sans-serif;
}
.top-head a:nth-child(1):hover{
    color: rgb(255, 2, 120);
    text-decoration: underline;
}


}

.menu{
  width:25px;
  height:25px;
  position:relative;
  right:-90%;
  display:none;
}

#toggle.active{
  background:#ff0e76;
}
#toggle{
  position:fixed;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:0.2s;
  top: 5%;
  z-index:100000;
}
#toggle.active::before{
transform:translateY(0px) rotate(45deg);
box-shadow:0 0 0 #fa006c;
}
#toggle::before{
  content:'';
  position:absolute;
  background:#fa006c;
  width:26px;
  height:4px;
  transition:0.2s;
  box-shadow:0 10px 0 #000;
  transform:translateY(-10px);
}
#toggle::after{
  content:'';
  position:absolute;
  background:black;
  width:26px;
  height:4px;
  transition:0.2s;
  background:#fa006c;
  transform:translateY(10px);
}
#toggle.active::after{
  transform:translateY(0px) rotate(-45deg);
}
.navigation{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
      display:flex;
    align-items:center;
    justify-content:center;
    z-index:0;
    visibility:hidden;
}
.navigation span{
  position:absolute;
  top:-100%;
  left:calc(25% * var(--i));
  width:25%;
  height:100%;
  transition:0.20s;
  background:#78E3FD;
  transition-delay:calc(.20s * var(--i));
}
.navigation.active span{
  top:0px;
}
.navigation.active{
  visibility:visible;
}
.navigation ul{
    z-index:1000;
      display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    transform:translateX(-100px);
    opacity:0;
    visibility:hidden;
    transition:0.5s;
}
.navigation.active ul{
  visibility:visible;
  opacity:1;
  transform:translateX(0px);
  transition-delay:.5s;
}
.navigation ul li{
  list-style-type:none;
  margin:11px 0px;
}
.navigation ul li a{
  text-decoration:none;
  font-size:1.5rem;
  color:black;
  text-align:center;
    padding:10px;
  font-weight:bold;
  font-family: 'Handlee', cursive;
  transition:.5s;
}
.navigation ul li a:hover{
  letter-spacing:7px;
  font-size:1.7rem;
}


  .navbar{
    z-index: 1000;
    position: absolute;
    top;0px;
  }  .title{
    font-family: 'Titillium Web', sans-serif;
    font-size:1.7rem;
    font-weight:bolder;
    height:30px;
    position:absolute;
    top: 15px;
    text-align:left;
    display:flex;
    justify-content:center;
    align-items:center;
    color:white;
    overflow:hidden;
  }
  .slider-text{

    z-index:100;
    color:#5AFF15;
    margin-left:12px;
    box-sizing:border-box;
    animation:slider 6s linear infinite;
    text-transform: uppercase;
  }
  @keyframes slider{
    0%{
      margin-top:-130px;
  }
  
     5%{
      margin-top:-76px;
    }
     30%{
      margin-top:-75px;
    }
     35%{
      margin-top:0px;
    }
     50%{
      margin-top:0px;
    }
     65%{
      margin-top:0px;
    }
     70%{
      margin-top:79px;
    }
     100%{
      margin-top:79px;
    }
  }
  .slider-text div:nth-child(1){
    color: rgb(0, 12, 179);
  }
  .slider-text div:nth-child(2){
    color: rgb(255, 179, 1);
  }
  .menu-item{
  position: relative;
  right: -610px;
  
}
  .menu-item ul{
    display: ;
    list-style-type: none;
  }
  .navbar{
    position: fixed;
    transition: .5s;
    width: 100%;
    padding: 20px 10px;
  }
  .sticky{
    width: 100%;
    background:#fff;
    padding:5px;
    color: black;
    box-shadow:0px 0px 20px #323232;
  }
header .sticky ul li a{
  color:var(--white-color);
}
  .navbar .menu-item ul li{
    margin: 5px;
    display: inline-block;
    cursor: pointer;
    margin-top: 15px;
    font-weight: bolder;
  }
.menu-item ul li a{
  text-decoration: none;
  color: var(--black-color);
  margin: 5px;
  font-size:1rem;
  padding: 6px;
font-family: 'Poppins', sans-serif;
}

.menu-item ul li a:hover{
  background-color: aqua;
  border-radius: 10px;
  color: black;
}
.tooltip{
  position:relative;
  display:inline;
}
.tooltiptext
{
 visibility:hidden;
 width:200px;
 background-color:#fff;
 color:black;
 padding:7px;
 border-radius:5px;
 position:absolute;
 top:20px;
 left:-20px;
 box-shadow: 0px 0px 10px #000;
z-index:1;
}
.tooltiptext a{
  text-decoration: none;
  font-size: 1rem;
  font-family: 'Poppins', sans-serif;
  color: black;
  margin:10px 0px;
  width: 100%;
}
.tooltiptext a:hover{
  background-color: rgb(165, 164, 159);
  border-radius: 8px;
}
.tooltip:hover .tooltiptext{
  visibility:visible;
}


  header{
      background: linear-gradient(rgba(0,0,0,.30),
      rgba(0,0,0,.30)
      ),
       url('bg2.jpg');
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-position: center;
      width: 100%;
      height: 100vh;
  }
  header h3{
      color:  white;
      font-family: 'Staatliches', cursive;
      font-size: 1.4rem;
      letter-spacing: 5px;
      font-weight: 400;
      position: absolute;
      top: 40%;
      left: 100px;
      border-left: 10px solid rgb(255, 0, 119);
      padding-left: 50px;
      animation: move-right 1s linear 1;
      animation-delay: .5s;
      animation-fill-mode: forwards;
      visibility: hidden;
  }
  @keyframes move-right{
    0%{
      transform: translateX(-400px);
      visibility: visible;
    }
    100%{
      transform: translateX(0px);
      visibility: visible;
    }
  }
  header h2{
      color:  white;
      font-size: 2.5rem;
      font-family: 'Poppins', sans-serif;
      letter-spacing: 5px;
      position: absolute;
      top: 60%;
      left: 100px;
      animation: move-left 1s linear 1;
      animation-delay: 1s;
      animation-fill-mode: forwards;
      visibility: hidden;
  }
  @keyframes move-left{
    0%{
      transform: translateX(1000px);
      visibility: visible;
    }
    100%{
      transform: translateX(0px);
      visibility: visible;
    }
  }
  main .about-p{
    padding: 80px 50px;
    background-color: rgb(2, 255, 200);
  }
 .about-p p{
      font-size: 1.5rem;
      font-family: 'Raleway', sans-serif;
      color: rgb(0, 0, 0);
      border-left: 8px solid white;
      position: relative;
      left: 20px;
      padding-left: 20px;
  }
  .about-desc{
     
  }
 
.history{
  width: 70%;
  height: 80vh;
  border-radius: 10px;
  margin-left: 10px;
  margin-top: 100px;
  background-color: rgb(43, 205, 226);
  position: relative;
  left: 0;
  }
  
.history:hover{
  box-shadow: 0px 0px 15px #000;
}
  .history img{
    width: 70vh;
    height: 80vh;
  
  }
  
  .history h3{
    color: white;
    font-size: 1.8rem;
    position: absolute;
    top: 40px;
    right: 30%;
    padding-left: 30px;
    border-left: 10px solid rgb(255, 0, 119);
    font-family: 'Poppins', sans-serif;
  }
.history-desc p{
  position: absolute;
  color: rgb(0, 0, 0);
  top: 150px;
  right: 0px;
  width: 400px;
  font-size: 2rem;
  font-family: 'Raleway', sans-serif;
}


.history-desc a{
  position:absolute;
  display:inline-block;
  width:150px;
  height:50px;
  top: 70%;
  right: 30%;
  box-shadow:0 5px 25px rgba(0,0,0,0.25);
}
.history-desc a span{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#00ccff;
  color:white;     
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  letter-spacing:3px;
  word-spacing: 3px;
  font-family: 'Staatliches', cursive;
}
.history-desc a span:nth-child(2){
 color:#00ccff;
 background:white;
 overflow:hidden;
 z-index:2;
 transition:0.5s;
 clip-path:polygon(60% 0,100% 0%,100% 100%,60% 100%,40% 53%);
}
.history-desc a span:nth-child(2):hover{
 clip-path:polygon(0 0,100% 0%,100% 100%,0 100%,0 50%);
}
.history-desc a span:nth-child(1):hover~span:nth-child(2){
 clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%,100% 50%);
}
.his-gif img{
  width: 300px;
  height: 300px;
  position: absolute;
  top: 100px;
  right: -320px;
}
 
.mission{
  width: 70%;
  height: 80vh;
  border-radius: 10px;
  margin-left: 10px;
  margin-top: 100px;
  background-color: rgb(211, 167, 48);
  position: absolute;
  right: 10px;
  }
  
.mission:hover{
  box-shadow: 0px 0px 15px #000;
}
  .mission img{
    width: 70vh;
    height: 80vh;
  
  }
  
  .mission h3{
    color: white;
    font-size: 1.8rem;
    position: absolute;
    top: 40px;
    right: 30%;
    padding-left: 30px;
    border-left: 10px solid rgb(255, 0, 119);
    font-family: 'Poppins', sans-serif;
  }
.mission-desc p{
  position: absolute;
  color: rgb(0, 0, 0);
  top: 150px;
  right: 0px;
  width: 400px;
  font-size: 2rem;
  font-family: 'Raleway', sans-serif;
}


.mission-desc a{
  position:absolute;
  display:inline-block;
  width:150px;
  height:50px;
  top: 70%;
  right: 30%;
  box-shadow:0 5px 25px rgba(0,0,0,0.25);
}
.mission-desc a span{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgb(199, 146, 1);
  color:white;     
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  letter-spacing:3px;
  word-spacing: 3px;
  font-family: 'Staatliches', cursive;
}
.mission-desc a span:nth-child(2){
 color:rgb(199, 146, 1);
 background:white;
 overflow:hidden;
 z-index:2;
 transition:0.5s;
 clip-path:polygon(60% 0,100% 0%,100% 100%,60% 100%,40% 53%);
}
.mission-desc a span:nth-child(2):hover{
 clip-path:polygon(0 0,100% 0%,100% 100%,0 100%,0 50%);
}
.mission-desc a span:nth-child(1):hover~span:nth-child(2){
 clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%,100% 50%);
}
.mis-gif img{
  width: 300px;
  height: 330px;
  position: absolute;
  top: 80px;
  left: -320px;
}


 
.vision{
  width: 70%;
  height: 80vh;
  border-radius: 10px;
  margin-left: 10;
  margin-top: 700px;
  background-color: rgb(94, 211, 48);
  position: absolute;
  left: 10px;
  }
  
.vision:hover{
  box-shadow: 0px 0px 15px #000;
}
  .vision img{
    width: 70vh;
    height: 80vh;
  
  }
  
  .vision h3{
    color: white;
    font-size: 1.8rem;
    position: absolute;
    top: 40px;
    right: 30%;
    padding-left: 30px;
    border-left: 10px solid rgb(255, 0, 119);
    font-family: 'Poppins', sans-serif;
  }
.vision-desc p{
  position: absolute;
  color: rgb(0, 0, 0);
  top: 250px;
  right: 0px;
  width: 400px;
  font-size: 1rem;
  font-family: 'Raleway', sans-serif;
}
.vision-desc p:nth-child(2){
  position: absolute;
  color: rgb(0, 0, 0);
  top: 150px;
  right: 0px;
  width: 400px;
  font-size: 2rem;
  font-family: 'Raleway', sans-serif;
}

.vision-desc a{
  position:absolute;
  display:inline-block;
  width:150px;
  height:50px;
  top: 70%;
  right: 30%;
  box-shadow:0 5px 25px rgba(0,0,0,0.25);
}
.vision-desc a span{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgb(107, 199, 1);
  color:white;     
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  letter-spacing:3px;
  word-spacing: 3px;
  font-family: 'Staatliches', cursive;
}
.vision-desc a span:nth-child(2){
 color:rgb(107, 199, 1);
 background:white;
 overflow:hidden;
 z-index:2;
 transition:0.5s;
 clip-path:polygon(60% 0,100% 0%,100% 100%,60% 100%,40% 53%);
}
.vision-desc a span:nth-child(2):hover{
 clip-path:polygon(0 0,100% 0%,100% 100%,0 100%,0 50%);
}
.vision-desc a span:nth-child(1):hover~span:nth-child(2){
 clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%,100% 50%);
}
.vis-gif img{
  width: 300px;
  height: 300px;
  position: absolute;
  top: 80px;
  right: -320px;
}


 
.mng-cmty{
  width: 70%;
  height: 80vh;
  border-radius: 10px;
  margin-left: 10;
  margin-top: 1300px;
  background-color: rgb(48, 86, 211);
  position: absolute;
  right: 10px;
  }
  
  .mng-cmty:hover{
  box-shadow: 0px 0px 15px #000;
}
.mng-cmty img{
    width: 70vh;
    height: 80vh;
  
  }
  
  .mng-cmty h3{
    color: white;
    font-size: 1.8rem;
    position: absolute;
    top: 40px;
    right: 10%;
    padding-left: 30px;
    border-left: 10px solid rgb(255, 0, 119);
    font-family: 'Poppins', sans-serif;
  }
  .mng-desc p{
  position: absolute;
  color: rgb(0, 0, 0);
  top: 230px;
  right: 0px;
  width: 400px;
  font-size: 1rem;
  font-family: 'Raleway', sans-serif;
}
.mng-desc p:nth-child(2){
  position: absolute;
  color: rgb(0, 0, 0);
  top: 150px;
  right: 0px;
  width: 400px;
  font-size: 2rem;
  font-family: 'Raleway', sans-serif;
}

.mng-desc a{
  position:absolute;
  display:inline-block;
  width:150px;
  height:50px;
  top: 70%;
  right: 30%;
  box-shadow:0 5px 25px rgba(0,0,0,0.25);
}
.mng-desc  a span{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgb(1, 31, 199);
  color:white;     
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  letter-spacing:3px;
  word-spacing: 3px;
  font-family: 'Staatliches', cursive;
}
.mng-desc  a span:nth-child(2){
 color:rgb(1, 31, 199);
 background:white;
 overflow:hidden;
 z-index:2;
 transition:0.5s;
 clip-path:polygon(60% 0,100% 0%,100% 100%,60% 100%,40% 53%);
}
.mng-desc  a span:nth-child(2):hover{
 clip-path:polygon(0 0,100% 0%,100% 100%,0 100%,0 50%);
}
.mng-desc a span:nth-child(1):hover~span:nth-child(2){
 clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%,100% 50%);
}
.mng-gif img{
  width: 300px;
  height: 310px;
  position: absolute;
  top: 80px;
  left: -320px;
}



 
.stff-prfl{
  width: 70%;
  height: 80vh;
  border-radius: 10px;
  margin-left: 10;
  margin-top: 1900px;
  background-color: rgb(192, 48, 211);
  position: absolute;
  left: 10px;
  }
  
  .stff-prfl:hover{
  box-shadow: 0px 0px 15px #000;
}
.stff-prfl img{
    width: 70vh;
    height: 80vh;
  
  }
  
  .stff-prfl h3{
    color: white;
    font-size: 1.8rem;
    position: absolute;
    top: 40px;
    right: 25%;
    padding-left: 30px;
    border-left: 10px solid rgb(255, 0, 119);
    font-family: 'Poppins', sans-serif;
  }
  .stff-desc p{
  position: absolute;
  color: rgb(0, 0, 0);
  top: 230px;
  right: 0px;
  width: 400px;
  font-size: 1rem;
  font-family: 'Raleway', sans-serif;
}
.stff-desc p:nth-child(2){
  position: absolute;
  color: rgb(0, 0, 0);
  top: 150px;
  right: 0px;
  width: 400px;
  font-size: 2rem;
  font-family: 'Raleway', sans-serif;
}

.stff-desc a{
  position:absolute;
  display:inline-block;
  width:150px;
  height:50px;
  top: 70%;
  right: 30%;
  box-shadow:0 5px 25px rgba(0,0,0,0.25);
}
.stff-desc  a span{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgb(153, 1, 199);
  color:white;     
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  letter-spacing:3px;
  word-spacing: 3px;
  font-family: 'Staatliches', cursive;
}
.stff-desc  a span:nth-child(2){
 color:rgb(153, 1, 199);
 background:white;
 overflow:hidden;
 z-index:2;
 transition:0.5s;
 clip-path:polygon(60% 0,100% 0%,100% 100%,60% 100%,40% 53%);
}
.stff-desc  a span:nth-child(2):hover{
 clip-path:polygon(0 0,100% 0%,100% 100%,0 100%,0 50%);
}
.stff-desc a span:nth-child(1):hover~span:nth-child(2){
 clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%,100% 50%);
}
.stff-gif img{
  width: 300px;
  height: 310px;
  position: absolute;
  top: 80px;
  right: -320px;
}





footer{
  position: relative;
  margin-top: 200%;
  background-color: rgb(30, 30, 42);
}
.left-foot{
  margin-left: 20px;
}
.left-foot .cont-a{
font-size: 1.4rem;
color: rgb(9, 243, 231);
text-decoration: none;
font-family: 'Poppins', sans-serif;
transition: .5s;
}
.left-foot .tel-a{
  font-size: .8rem;
color: rgb(255, 255, 255);
text-decoration: none;
font-family: 'Poppins', sans-serif;
transition: .5s;
}
.left-foot .tel-a:hover{
  color: rgb(122, 43, 226);
}
.left-foot .cont-a:hover{
  color: rgb(122, 43, 226);
}
.left-foot .addrs{
  font-family: 'Raleway', sans-serif;
  padding-top: 20px;
  padding-bottom: 100px;
  color: rgb(199, 197, 197);
}
.left-foot .copyrt{
  font-family: 'Raleway', sans-serif;
  color: rgb(144, 144, 144);
  font-size: .8rem;
  padding-bottom: 30px;
}
.left-foot .copyrt a{
  color: white;
  transition: .8s;
}
.left-foot .copyrt a:hover{
  color: #00ffd5;
  font-family: 'Staatliches', cursive;
  letter-spacing: 5px;
}

.right-foot{
  position: absolute;
  top: 0px;
  right: 0;
}
.foot-menu{
  display: flex;
  flex-direction: column;
  text-align: right;
  margin-right: 25px;
  margin-top: 30px;
}
.foot-menu a{
  color: white;
  font-size: 1.2rem;
  font-family: 'Poppins', sans-serif;
  text-decoration: none;
  transition: .5s;
  display: inline-block;
}
.foot-menu a:hover{
text-decoration: underline;
color: rgb(122, 43, 226);
}
.social-menus{
  margin-top: 50px;
  margin-right: 10px;
}
.social-menus a{
  margin: 5px;
  padding: 5px;
  background: white;
  font-size: 2rem;
  border-radius: 50%;
  color: rgb(87, 4, 165);
}
.social-menus a:nth-child(3),.social-menus a:nth-child(4){
  padding: 5px 8px;
}
.social-menus a:hover .fa-facebook{
  color:#3b5998;
}
.social-menus a:hover .fa-whatsapp{
  color:#4fce5d;
}
.social-menus a:hover .fa-twitter{
  color:#00acee;
}
.social-menus a:hover .fa-instagram{
  color:#f14843;
}
.social-menus a:hover .fa-youtube{
  color:#f00;
}
.social-menus a:hover i{
transform: scale(.80);
}
.social-menus a i{
  transition: .5s;
}